@import "variables";

.login-layout {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("src/assets/login-bg.png");

  .login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0 20px 80px rgba(217, 217, 217, 0.4);
    border-radius: 20px;
  }

  .left-img {
    width: 580px;
    height: 670px;

    img {
      width: 580px;
      height: 670px;
    }
  }

  .form-content-wrapper {
    height: 670px;
    padding: 20px 110px 80px 110px;

    .locale-switcher {
      display: flex;
      justify-content: flex-end;
      margin-right:-80px;
    }

    .form-content {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-bottom:0;
      margin-top:30px;

      .logo {
        width:70px;
        height:70px
      }

      .brand {
        width: 158px;
        font-size: 30px;
        font-weight: 700
      }
    }
  }
}

.btn {
  width: 100%;
  border-radius: 32px;
  height: 48px;
  font-size: 14px;

  &.submit-btn {
    margin-top: 20px;
  }

  &.sso-btn {
    margin-top: 16px;
  }
}


